<template>
  <div class="sentence-write">
    <div class="sentence-write-top">
      <div class="sentence-write-top-content">
        <span v-hidden-opacity="isShowSentence">{{
          sentenceData.sentence
        }}</span>
      </div>
      <div class="sentence-write-top-input">
        <div class="label">
          <span>默写</span>
        </div>
        <div class="input-container">
          <div class="input-list" v-if="isSplit">
            <span v-for="(item, index) in answerList" :key="index">
              <span v-if="item.isPunctuation">{{
                " " + item.trueWord + ""
              }}</span>
              <span v-else-if="item.isTrue">
                {{ " " + item.trueWord + "" }}
              </span>
              <el-input
                @paste.native.capture.prevent="$handlePaste"
                type="text"
                :ref="`split-input-${item.index}`"
                @input="
                  (value) => {
                    checkedInputFun(item, value);
                  }
                "
                :disabled="item.isDisabled"
                v-model="item.stuWord"
                v-else
              />
            </span>
          </div>
          <el-tooltip
            v-else
            class="item"
            effect="dark"
            content="Crtl+Enter显示答案"
            placement="top-start"
            :manual="true"
            :value="isShowReminder"
          >
            <el-input
              @paste.native.capture.prevent="$handlePaste"
              v-model="stuAnswer"
              :disabled="isChecked"
              ref="sentenceInput"
            ></el-input>
          </el-tooltip>
        </div>
        <div class="input-checked-answer">
          <img
            v-show="isChecked && checkedAnswer"
            src="@/assets/img/true-b.png"
            alt=""
          />
          <img
            v-show="isChecked && !checkedAnswer"
            src="@/assets/img/false-b.png"
            alt=""
          />
        </div>
      </div>
    </div>
    <div class="study-line"></div>
    <div class="sentence-write-bottom">
      <div class="sentence-write-bottom-paraphrase">
        {{ sentenceData.paraphrase }}
      </div>
    </div>
  </div>
</template>
<script>
import { throttle } from "@/utils/utils";
import { setSentenceToWord } from "@/assets/js/sentence2word";
export default {
  data() {
    return {
      wordList: [],
      answerList: [],
      stuAnswer: "",
      isChecked: false,
      isSplit: false,
      checkedAnswer: false,
      isShowSentence: false,
      firstIsTrue: null,
      isShowReminder: false,
    };
  },
  methods: {
    answerTrue() {
      // 答对了
      this.$emit("answerTrue", this.firstIsTrue);
    },
    // 切分处理句子
    setWordList() {
      let result = setSentenceToWord(this.sentenceData.sentence);
      this.wordList = result.wordList;
      this.answerList = result.answerList;
    },
    focusWordInput() {
      if (this.$refs.sentenceInput) {
        this.$refs.sentenceInput.focus();
      }
    },
    checkedInputSentence() {
      let isTrue = this.stuAnswer.trim() == this.sentenceData.sentence.trim();
      if (this.firstIsTrue !== true && this.firstIsTrue !== false) {
        this.firstIsTrue = isTrue;
      }
      this.isChecked = true;
      this.checkedAnswer = isTrue;
      if (this.checkedAnswer) {
        this.answerTrue();
      } else {
        this.$emit("answerFalse");
      }
      this.isShowSentence = true;
    },
    // 检查单词
    checkedInputWord(data) {
      let result = true;
      let trueAnswer = data.trueWord.trim().split("");
      let stuAnswer = data.stuWord.trim().split("");
      if (stuAnswer.length > trueAnswer.length) {
        result = false;
      } else {
        stuAnswer.forEach((item, index) => {
          if (item != trueAnswer[index]) {
            result = false;
          }
        });
      }
      return result;
    },
    // 获取两个单词重叠的部分，从头开始
    getTrueWord(data) {
      let str = "";
      let trueAnswer = data.trueWord.trim().split("");
      let stuAnswer = data.stuWord.trim().split("");
      for (let i = 0; i < stuAnswer.length; i++) {
        if (trueAnswer[i] == stuAnswer[i]) {
          str += trueAnswer[i];
        } else {
          break;
        }
      }
      return str;
    },
    checkedInputFun(data) {
      let res = this.checkedInputWord(data);
      if (res) {
        if (data.trueWord.trim() == data.stuWord.trim()) {
          data.isTrue = true;
          this.changeInputDisabled();
        }
        this.isShowSentence = false;
      } else {
        this.$emit("answerFalse");
        let res = this.getTrueWord(data);
        let timer = setTimeout(() => {
          data.stuWord = res;
          this.isShowSentence = true;
          clearTimeout(timer);
        }, 200);
      }
    },
    changeInputDisabled() {
      if (this.answerList.length > 0) {
        let data = this.answerList.filter((item) => {
          return !item.isTrue;
        });
        if (data.length > 0) {
          data[0].isDisabled = false;
          this.$nextTick(() => {
            if (this.$refs[`split-input-${data[0].index}`]) {
              this.$refs[`split-input-${data[0].index}`][0].focus();
            }
          });
        } else {
          this.isChecked = true;
          this.checkedAnswer = true;
          this.answerTrue();
        }
      }
    },
    // 监听回车
    watchKeyUp(e) {
      if (this.isOpenMessageBox) {
        return;
      }
      if (e.keyCode == 13 && e.ctrlKey) {
        this.keyCtrlEnter();
        return;
      }
      if (e.keyCode == 13) {
        // isFirstCheck
        this.keyCode13();
        return;
      }
    },
    keyCtrlEnter() {
      if (this.isSplit) {
        return;
      }
      this.checkedInputSentence();
    },

    keyCode13: throttle(function () {
      if (!this.isSplit && this.stuAnswer && !this.isChecked) {
        //   整句校验
        this.checkedInputSentence();
        return;
      }
      if (!this.isSplit && this.isChecked && !this.checkedAnswer) {
        // 回答错误，切割句子
        this.isSplit = true;
        this.isChecked = false;
        this.$nextTick(() => {
          this.changeInputDisabled();
        });
        return;
      }
      if (this.isChecked && this.checkedAnswer) {
        //   回答正确下一题
        this.$emit("nextSentence");
        return;
      }
      if (!this.isSplit && !this.isChecked && !this.stuAnswer) {
        this.isShowReminder = true;
        let timer = setTimeout(() => {
          this.isShowReminder = false;
          clearTimeout(timer);
        }, 1000);
        return;
      }
    }, 500),
    initCom() {
      this.stuAnswer = "";
      this.isChecked = false;
      this.isSplit = false;
      this.isShowSentence = false;
      this.firstIsTrue = null;
      this.setWordList();
      this.$nextTick(() => {
        this.focusWordInput();
      });
    },
  },
  mounted() {
    window.addEventListener("keyup", this.watchKeyUp);
    this.initCom();
  },
  beforeDestroy() {
    window.removeEventListener("keyup", this.watchKeyUp);
  },
  props: {
    sentenceData: {
      type: Object,
    },
    isOpenMessageBox: {
      tyep: Boolean,
    },
  },
};
</script>